var datas=[
		{name: "分类", type: "view", key: "的道道", url: "https://develop.zhihuiyouzhan.com.cn/index/petrol/index/mid/1"},
		{name: "你好生活", type: "click", key: "", sub_button:[
			{name: "积分商城", type: "view", key: "飞飞飞方法", url: "https://develop.zhihuiyouzhan.com.cn/index/integral/index/mid/1"},
			{name: "个人中心", type: "view", key: "飞飞飞", url: "https://develop.zhihuiyouzhan.com.cn/index/user/index/mid/1"},
			{name: "便利店", type: "view", key: "方法", url: "https://develop.zhihuiyouzhan.com.cn/index/goods/index/mid/1"},
			{name: "领取优惠券", type: "view", key: "飞飞飞", url: "https://develop.zhihuiyouzhan.com.cn/index.php/index/user/get_coupon/mid/1"}
		]},
		{name: "联系我们", type: "click", key:'你是风儿',url:''}
	]
/*
menuList 取过来的数据
firstActive 控制一级菜单当前样式的显示隐藏
menu 控制当前二级菜单的显示
secondActive 控制二级菜单当前样式的显示隐藏
content 菜单内容选项卡的显示隐藏
items 获取当前的值
menuName 菜单名称
menuKey 发送的信息
menuUrl 发送的链接
require  要求
menuTit  名称
menuContent 内容
listContent 是否显示菜单下面的操作
menuShow  右侧菜单显示隐藏
 * */

layui.use(['layer','form'],function(){
	layer=layui.layer;
	form=layui.form
})


new Vue({
	el:'#wechat',
	data:{
		menuList:datas,
		firstActive:0,
		menu:0,
		secondActive:null,
		content:true,
		items:null,
		menuName:'',
		menuKey:'',
		menuUrl:'',
		menuRequire:'',
		menuTit:'',
		menuContent:'',
		listContent:'',
		menuShow:true,
	},
	methods:{
		//点击一级菜单
		menuFirst:function(item,index){
			this.firstActive=index
			this.menu=index
			this.secondActive=null
			this.items=item
			this.MeunShow(item)
			this.require(1)
			this.listContentc(item)
		},
		//点击二级菜单
		menuSecond:function(item,index){
			this.secondActive=index
			this.firstActive=null
			this.items=item
			this.MeunShow(item)
			this.require(2)
			this.listContent=true
		},
		//添加一级菜单
		firstAdd:function(){
			var Strs={name: "菜单名称", type: "view", key: "", url: ""}
			this.menuList.push(Strs)
			var len=this.menuList.length
			this.firstActive=len-1
			this.menu=this.firstActive
			this.items=Strs
			this.firstAddWidth()
			this.addMenuShow(this.firstActive)
			this.require(1)
			this.listContent=true
		},
		//添加二级菜单
		secondAdd:function(item){
			var Strs={name: "子菜单名称", type: "view", key: "", url: ""}
			//判断是否有sub_button，没有的话，就加上
			if(typeof this.menuList[this.menu].sub_button=='undefined'){
				this.$set(this.menuList[this.menu], 'sub_button', [])
			}
			if(this.menuList[this.menu].sub_button.length>=5){
				layer.msg('最多添加5级子菜单',{icon:2})
				return false
			}
			this.items=Strs
			this.menuList[this.menu].sub_button.push(Strs)
			var len=this.menuList[this.menu].sub_button.length-1
			this.firstActive=null
			this.secondActive=len
			this.addMenuShow(this.menu,this.secondActive)
			this.require(2)
			this.listContent=true
		},
		//计算添加一级菜单的宽度
		firstAddWidth:function(){
			var wechatAdd=$('.wechat-first>li').eq(-1)
			wechatAdd.show()
			if(this.menuList.length==0){
				wechatAdd.width('100%')
			}else if(this.menuList.length==1){
				wechatAdd.css('width','calc(100% - 100%/3 )')
			}else if(this.menuList.length==2){
				wechatAdd.css('width','calc(100%/3)')
			}else if(this.menuList.length==3){
				wechatAdd.hide()
			}
		},
		//显示和要求
		require:function(value){
			if(value==1){
				this.menuRequire='字数不超过4个汉字或8个字母'
				this.menuTit='菜单名称'
				this.menuContent='菜单内容'
			}else{
				this.menuRequire='字数不超过8个汉字或16个字母'
				this.menuTit='子菜单名称'
				this.menuContent='子菜单内容'
			}
		},
		//显示菜单选项
		listContentc:function(item){
			var index=this.menuList.indexOf(item)
			if(typeof this.menuList[index].sub_button== 'undefined'){
				this.listContent=true;
			}else{
				this.listContent=false;
			}
		},
		//点击菜单显示
		MeunShow:function(item){
			this.menuName=item.name
			this.menuKey=item.key
			this.menuUrl=item.url
			this.menuShow=true
		},
		//添加菜单显示
		addMenuShow:function(len,index){
			if(arguments.length==1){
				//一级菜单
				this.menuName=this.menuList[len].name;
				this.menuKey=this.menuList[len].key;
				this.menuUrl=this.menuList[len].url;
			}else{
				//二级菜单
				this.menuName=this.menuList[len].sub_button[index].name;
				this.menuKey=this.menuList[len].sub_button[index].key;
				this.menuUrl=this.menuList[len].sub_button[index].url;
			}
			this.menuShow=true
		},
		//更新名称
		changeName:function(item,value){
			var index=this.menuList.indexOf(item)
			console.log('123')
			if(index==-1){
				//8个汉字或者16个字母
				var len=value.length
				var btn=0
				 for(var i=0;i<len;i++){
				 	if(value.charCodeAt(i)>255){
				 		btn+=2
				 	}else{
				 		btn++
				 	}
				 }
				 if(btn>16){
				 	layer.tips('您输入的格式不正确', '#name');
				 	return false
				 }else if(btn==0){
					layer.tips('菜单名称不得为空', '#name');
				 }else{
				 	//更新名称
				 	this.menuList[this.menu].sub_button[this.secondActive].name=value
				 }
			}else{
				//4个汉字或者16个字母
				var len=value.length
				var btn=0
				 for(var i=0;i<len;i++){
				 	if(value.charCodeAt(i)>255){
				 		btn+=2
				 	}else{
				 		btn++
				 	}
				 }
				 if(btn>8){
					return layer.tips('您输入的格式不正确', '#name');
				 }else if(btn==0){
					return layer.tips('菜单名称不得为空', '#name');
				 }else{
				 	//更新名称
				 	this.menuList[this.menu].name=value
				 }
			}
		},
		//更新名称
		changeKey:function(item,value){
			var index=this.menuList.indexOf(item)
			if(index==-1){
				this.menuList[this.menu].sub_button[this.secondActive].key=value
			}else{
				this.menuList[this.menu].key=value
			}
		},
		//更新链接
		changeLink:function(item,value){
			var index=this.menuList.indexOf(item)
			if(index==-1){
				this.menuList[this.menu].sub_button[this.secondActive].url=value
			}else{
				this.menuList[this.menu].url=value
			}
		},
		//删除
		deletes:function(item){
			var index=this.menuList.indexOf(item)
			var $this=this
			if(index==-1){
				//delete 二级菜单
				var oName=this.menuList[this.menu].name
				var oNames=this.menuList[this.menu].sub_button[this.secondActive].name
				layer.confirm('您确定要删除<span style="color:red">'+oName+'</span>下面的<span style="color:red">'+oNames+'</span>吗？',
				{title:'确认删除'},function(){
					//确认删除
					$this.menuList[$this.menu].sub_button.splice($this.secondActive,1)
					layer.msg('删除成功', {icon: 1,time:1000});
						$this.menuShow=false
						$this.secondActive=10
						if($this.menuList[$this.menu].sub_button.length==0){
						delete $this.menuList[$this.menu].sub_button
					}
				}, function(){})
			}else{
				//delete 一级菜单
				var oName=this.menuList[this.menu].name
				var oNameNum=''
				if(typeof this.menuList[this.menu].sub_button=='undefined'){
					oNameNum=''
				}else{
					oNameNum='及其子栏目'
				}
				layer.confirm('您确定要删除<span style="color:red">'+oName+'</span>'+oNameNum+'吗？',
				{title:'删除'},function(){
					//确认删除
					$this.menuList.splice(index,1)
					layer.msg('删除成功', {icon: 1,time:1000});
					$this.menuShow=false
					$this.firstAddWidth()
					//删除后判断this.menuList有内容，显示右侧菜单
					$this.firstActive=10
				}, function(){})
			}
		},
		//判断点击的是那个click还是view
		type:function(item,type){
			//获取点击的菜单
			var index=this.menuList.indexOf(item)
			if(index==-1){
				//点击子菜单
				this.menuList[this.menu].sub_button[this.secondActive].type=type
			}else{
				//点击主菜单
				this.menuList[this.menu].type=type
			}
				if(type=='click'){
					this.content=true
				}else if(type=='view'){
					this.content=false
				}
		},
		//提交验证
		submits:function(){
			//菜单名称是否重复
			var menu=[]
			var $this=this
			var flag=0
			
			$(this.menuList).each(function(index,item){
				menu.push(item.name)
			})
			
			$(this.menuList).each(function(index,item){
					//一级菜单 名称是否重复
					for(var i=0;i<menu.length;i++){
						if(menu.indexOf(menu[i])!=menu.lastIndexOf(menu[i])){
							$this.firstActive=i
							$this.menu=i
							$this.addMenuShow(i)
							$this.secondActive=null
							$this.items=item
							setTimeout(function(){
								layer.tips('该名称重复啦','#name')
							},50)
							flag=1
							return false
						}
					}
				
					//一级菜单是否填写文字或链接
					if(flag==0){
						if(!item.sub_button){
							if(item.key=='' && item.url==''){
								$this.firstActive=index
								$this.menu=index
								$this.addMenuShow(index)
								$this.items=item
								setTimeout(function(){
									layer.tips("您尚未添加任何文字或链接",'#text',{tips:2});
								},50)
								flag=1
								return false
							}
						}
					}
					//
					//二级菜单名称  是否重复
					if(item.sub_button){
						var btns=[]
						$(item.sub_button).each(function(i,item){
							btns.push(item.name)
						})
						//二级菜单名称是否重复
						if(flag==0){
							$(item.sub_button).each(function(i,item){
								for(var i=0;i<btns.length;i++){
									if(btns.indexOf(btns[i])!=btns.lastIndexOf(btns[i])){
										$this.menu=index
										$this.addMenuShow(index,i)
										$this.secondActive=i
										$this.firstActive=10
										$this.items=item
										setTimeout(function(){
											layer.tips('该名称重复啦','#name')
										},50)
										flag=1
										return false
									}
								}
							})
						}
						//
						//二级菜单的文字或者链接是否为空
						if(flag==0){
							$(item.sub_button).each(function(i,item){
								if(item.key=='' && item.url==''){
									$this.menu=index
									$this.addMenuShow(index,i)
									$this.secondActive=i
									$this.firstActive=10
									$this.items=item
									$this.listContent=true
									setTimeout(function(){
										layer.tips("您尚未添加任何文字或链接",'#text',{tips:2});
									},50)
									flag=1
									return false
								}
							})
						}
						//
					}
			})
			
			//提交
			if(flag==0){
				console.log($this.menuList)
			}
					
		}
	
	},
	mounted:function(){
		this.$nextTick(function(){
			//initialization
			this.firstAddWidth()
			if(this.menuList.length>0){
				this.addMenuShow(0)
				this.items=this.menuList[0]
				this.require(1)
				this.listContentc(this.items)
			}
		})
	}
})

